<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getSelectedStudent,getCourse } from '@/apis/manger'; // 导入 API 方法
// 数据及分页相关参数
const courseSelections = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const selectCourse = ref([]);

// 查询条件
const studentId = ref('');
const courseName = ref('');

// 查询功能
const fetchCourseSelections = async () => {
  try {
    // 构造查询条件
    const queryCondition = {
      studentId: studentId.value || null,
      courseName: courseName.value || null,
      page: currentPage.value - 1,
      pageSize: pageSize.value
    };

    // 调用查询已选学生的 API
    const response = await getSelectedStudent(queryCondition);
    courseSelections.value = response.result.data;
    console.log(courseSelections.value)
    totalItems.value = response.result.total; // 假设接口返回总记录数
  } catch (error) {
    ElMessage.error('获取课程选择信息失败');
  }
};

// 分页功能
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchCourseSelections(); // 切换页面时重新查询
};

// 初始化数据
onMounted( async () => {
  let respon= await getCourse();
  selectCourse.value=respon.result;
  await fetchCourseSelections();
});
</script>

<template>
  <el-card>
    <div class="search-bar">
      <label>学号：</label>
      <el-input-number
          controls-position="right"
          v-model="studentId"
          class="input"
      />
      <el-select
          v-model="courseName"
          placeholder="请选择课程"
          class="input"
          filterable
          clearable
      >
        <el-option
            v-for="course in selectCourse"
            :key="course.id"
            :label="course.name"
            :value="course.name"
        ></el-option>
      </el-select>
      <el-button type="primary" @click="fetchCourseSelections">查询</el-button>
    </div>
    <el-table :data="courseSelections" class="course-table">
      <el-table-column label="学号" prop="student.id"></el-table-column>
      <el-table-column label="学生姓名" prop="student.name"></el-table-column>
      <el-table-column label="课程编号" prop="course.id"></el-table-column>
      <el-table-column label="课程名称" prop="course.name"></el-table-column>
      <el-table-column label="学分" prop="course.credits"></el-table-column>
    </el-table>
    <el-pagination :total="totalItems" :page-size="pageSize" :current-page="currentPage" @current-change="handlePageChange"></el-pagination>
  </el-card>
</template>

<style scoped>
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.input {
  width: 200px;
  margin-right: 20px;
}

.course-table {
  width: 100%;
  margin-top: 20px;
}
</style>
